<template>
  <div class="filter">
    <el-collapse v-model="props.expand">
      <el-collapse-item name="2">
        <div class="reset_box mb10">
          <p>通用筛选</p>
          <el-button
            class="yyx-btn"
            type="primary"
            @click="
              () => {
                filterVal = [];
                filterVal3 = [];
                brandIds = [];
                reset();
              }
            "
            >重置</el-button
          >
        </div>
        <slot name="select"></slot>
        <div style="display: flex; flex-wrap: wrap">
          <div v-for="(item, index) in _filterData" :key="item.stastsId">
            <div v-if="item.isCommon === 1" class="attr-item">
              <!-- 一级属性名称 -->
              <p style="color: #86909c; font-size: 16px">{{ item.stastsName }}：</p>
              <el-checkbox-group v-model="filterVal[index]" size="small">
                <!-- 二级属性 -->
                <div
                  v-for="(item2, index2) in item.children"
                  class="attr-wrap"
                  :key="index2"
                  :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                >
                  <el-checkbox
                    :label="item2.stastsName"
                    :value="item2.stastsId"
                    :key="item2.stastsId"
                    @change="
                      val => {
                        changeAttr2(val, item, item2, index);
                      }
                    "
                  >
                    <template #default>
                      <p class="attr2">{{ item2.stastsName }}</p>
                      <img
                        class="active-icon"
                        v-if="item2?.children?.length <= 0 || !item2?.children"
                        src="@/assets/images/chose_icon.png"
                        alt=""
                      />
                    </template>
                  </el-checkbox>
                  <!-- 三级属性 -->
                  <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                    <el-select
                      v-model="item2.select3"
                      :placeholder="filterVal.flat().includes(item2.stastsId) ? '全部' : '请选择'"
                      size="small"
                      clearable
                      style="min-width: 120px"
                      multiple
                      @change="
                        val => {
                          changeAttr3(val, item, item2, index, index2);
                        }
                      "
                    >
                      <el-option
                        v-for="item3 in item2.children"
                        :key="item3.stastsId"
                        :label="item3.stastsName"
                        :value="item3.stastsId"
                      />
                    </el-select>
                  </div>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="more_btn">
            <div class="more_btn_box" @click="collapseActive = !collapseActive">
              <span>更多</span>
              <img
                :class="`icon ${!collapseActive ? '' : 'more_active'}`"
                src="@/assets/images/arrow.png"
                alt=""
                @click="upload = !upload"
              />
            </div>
          </div>
        </div>
        <!-- ========================== -->

        <div :class="`sx_chose ${collapseActive ? 'collapse_active' : ''}`">
          <!-- <el-collapse v-model="collapseActive"> -->
          <!-- <el-collapse-item title="属性筛选" name="1"> -->
          <div style="display: flex; flex-wrap: wrap">
            <!-- 品牌 -->
            <div class="attr-item">
              <p style="color: #86909c; font-size: 16px; width: 60px">品牌：</p>
              <el-checkbox-group v-model="brandIds" size="small">
                <!-- 二级品牌-->
                <div
                  v-for="(item2, index2) in _filterData[0]?.brands || []"
                  class="attr-wrap"
                  :key="index2"
                  :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                >
                  <el-checkbox
                    :label="item2.bandName"
                    :value="item2.brandId"
                    :key="item2.brandId"
                    @change="
                      val => {
                        changeBrand2(val, _filterData[0]?.brands, item2, index);
                      }
                    "
                  >
                    <template #default>
                      <p class="attr2">{{ item2.bandName }}</p>
                      <img
                        class="active-icon"
                        v-if="item2?.children?.length <= 0 || !item2?.children"
                        src="@/assets/images/chose_icon.png"
                        alt=""
                      />
                    </template>
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <!-- 属性 -->
            <div v-for="(item, index) in _filterData" :key="item.stastsId">
              <div v-if="item.isCommon === 0" class="attr-item">
                <p style="color: #86909c; font-size: 16px">{{ item.stastsName }}：</p>
                <el-checkbox-group v-model="filterVal[index]" size="small">
                  <!-- 二级属性 -->
                  <div
                    v-for="(item2, index2) in item.children"
                    class="attr-wrap"
                    :key="index2"
                    :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                  >
                    <el-checkbox
                      :label="item2.stastsName"
                      :value="item2.stastsId"
                      :key="item2.stastsId"
                      @change="
                        val => {
                          changeAttr2(val, item, item2, index);
                        }
                      "
                    >
                      <template #default>
                        <p class="attr2">{{ item2.stastsName }}</p>
                        <img
                          class="active-icon"
                          v-if="item2?.children?.length <= 0 || !item2?.children"
                          src="@/assets/images/chose_icon.png"
                          alt=""
                        />
                      </template>
                    </el-checkbox>
                    <!-- 三级属性 -->
                    <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                      <el-select
                        v-model="item2.select3"
                        :placeholder="filterVal.flat().includes(item2.stastsId) ? '全部' : '请选择'"
                        size="small"
                        clearable
                        style="min-width: 120px"
                        multiple
                        @change="
                          val => {
                            changeAttr3(val, item, item2, index, index2);
                          }
                        "
                      >
                        <el-option
                          v-for="item3 in item2.children"
                          :key="item3.stastsId"
                          :label="item3.stastsName"
                          :value="item3.stastsId"
                        />
                      </el-select>
                    </div>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <!-- </el-collapse-item> -->
          <!-- </el-collapse> -->
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- <el-button
      @click="() => { filterVal = [[], [], [], [], ['1803689228187570177'], ['1796379008914526209', '1796379008914526210']] }">设置</el-button>
    <el-button @click="() => { filterVal = [] }">清空</el-button> -->
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from "vue";
import checked from "@/assets/images/chose_icon.png";
const _filterData = ref([]); //筛选的属性值
const filterVal = ref([]); //用户选中的筛选属性值
const filterVal3 = ref([]); //用户选中的3级筛选属性值
const collapseActive = ref([]);
const activeNames = ref(true);
const emit = defineEmits(["changeAttr", "reset", "updateList"]);
const props = defineProps({
  filterData: {
    type: Object,
    default: () => {}
  },
  expand: {
    type: Array,
    default() {
      return ["2"];
    }
  }
});
watch(
  () => props.filterData,
  val => {
    _filterData.value = val;
  },
  { deep: true }
);
const brandIds = ref([]);
// 选中的数据
const choseList = ref([]);
// 选中事件
const isChose = ref(false);
const num = ref(-1);
const handelClickChose = item => {
  item.checked = !item.checked;
};

//2级品牌筛选
const choseBrandList = ref([]);
const changeBrand2 = (val, item, item2, index) => {
  if (val) {
    choseBrandList.value.push(item2);
  } else {
    choseBrandList.value.map(it => {
      if (it.brandId == item2.brandId) {
        choseBrandList.value.splice(choseBrandList.value.indexOf(it), 1);
      }
    });
  }

  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
  emit("updateList", [...choseList.value, ...choseBrandList.value]);
};
//2级属性筛选
const changeAttr2 = (val, item, item2, index) => {
  if (val) {
    choseList.value.push(item2);
  } else {
    choseList.value.map(it => {
      if (it.stastsId == item2.stastsId) {
        choseList.value.splice(choseList.value.indexOf(it), 1);
      }
    });
  }

  //二级选中的属性id重新排序，按照接口返回的属性顺序排
  let sortArr = [];
  filterVal.value.map((arr, i) => {
    if (index === i) {
      let Arr = [];
      if (arr) {
        for (let ids of arr) {
          const _index = item.children.findIndex(child => child.stastsId == ids);
          if (_index >= 0) {
            Arr[_index] = ids;
          }
        }
      }
      sortArr[index] = Arr;
    }
  });
  filterVal.value[index] = sortArr[index];

  if (!val) {
    item2.select3 = null;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;


  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
  emit("updateList", choseList.value);
};

// 3级属性筛选
const changeAttr3 = (val, item, item2, index, index2) => {
  isChose.value = val;
  // 先清空choseList保存的三阶数据
  let arrs = choseList.value.filter(it => it.checked == true);
  choseList.value = arrs;
  // 在次赋值三级数据给choseList
  const arr = [];
  _filterData.value.map(it => {
    it.children.map(cit => {
      if (cit.select3?.length > 0) {
        cit.select3.map(obj => {
          cit.children.map(child => {
            if (obj == child.stastsId) {
              arr.push(child);
            }
          });
        });
      }
    });
  });
  // 赋值choseList三级数据
  choseList.value = [...choseList.value, ...arr];

  // 去重
  const uniqueArray = [...new Map(choseList.value.map(item2 => [item2.stastsId, item2])).values()];
  choseList.value = uniqueArray;
  // 如果为arr为0清空三级数据
  if (arr.length <= 0) {
    const arr = choseList.value.filter(item2 => item2.checked == true);
    choseList.value = arr;
  }
  if (val) {
    //任意选中一个3级属性，默认选中对应的二级属性
    filterVal.value[index] = filterVal.value[index] || [];
    filterVal.value[index][index2] = item2.stastsId;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;

  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
  emit("updateList", choseList.value);
};

const reset = () => {
  emit("updateList", []);
  emit("reset");
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/index";
.attr3 {
  display: flex;
  .child_name {
    margin: 0 10px 0 0;
  }
}
:deep(.el-collapse-item__header) {
  display: none;
}
.more_btn {
  display: flex;
  justify-content: end;
  flex: 1;
  .more_btn_box {
    display: flex;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
  }
  .icon {
    width: 16px;
    height: 16px;
    transition: transform 0.5s ease-in-out;
  }
  .more_active {
    transform: rotate(-180deg);
  }
}
.sx_chose {
  box-sizing: border-box;
  border-top: 0px;
  padding-top: 0px;
  max-height: 0;
  overflow: hidden;
  transition-property: padding-top, max-height;
  transition-duration: 0.3s;
  :deep(.el-collapse-item__header) {
    display: block !important;
    text-align: left;
    position: relative;
    i {
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}
.collapse_active {
  max-height: 300px;
  padding-top: 20px;
  border-top: 1px solid #eef1f4;
  overflow-y: auto;
}
.secondary {
  :deep(.el-checkbox__input) {
    display: none !important;
  }
  :deep(.el-checkbox) {
    padding: 0 !important;
  }
  .attr2 {
    color: #4e5969 !important;
  }
  :deep(.el-select__wrapper) {
    height: 32px !important;
  }
}
:deep(.el-select__wrapper) {
  height: 32px !important;
}
:deep(.el-collapse) {
  border: none !important;
}
.active {
  border: 1px solid #000;
}
:deep(.el-checkbox__label) {
  padding: 0 !important;
}
:deep(.is-checked) {
  color: #000 !important;
}
.child_name {
  width: auto;
  // height: 100%;
  font-size: 14px;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  margin-right: 6px;
  // padding: 5px 19px;
  // overflow: hidden;
  position: relative;
  .attr2 {
    color: #000 !important;
  }
  .check {
    position: absolute;
    right: -1px;
    bottom: -2px;
    img {
      width: 20px;
    }
  }
  :deep(.el-checkbox__input) {
    display: none !important;
  }
}
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    min-height: 32px;
    padding: 1px 8px;
    margin-bottom: 0px;
    .el-checkbox__label {
      font-size: 14px;
      padding-left: 0;
      margin-right: 8px;
    }
    .el-checkbox.el-checkbox--small {
      border-bottom: 1px solid transparent;
      &.is-checked {
        .el-checkbox__label {
          border-bottom: 1px solid #000;
          line-height: 30px;
        }
      }
    }
    &.attr-only2 {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
      position: relative;
      padding: 1px 0;
      .active-icon {
        display: none;
      }
      .el-checkbox__label {
        margin-right: 0;
      }
      .el-checkbox.el-checkbox--small {
        padding: 1px 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        &.is-checked {
          border: 1px solid #000;
          .active-icon {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            right: 0px;
            bottom: 0px;
          }
          .el-checkbox__label {
            border-bottom: none;
          }
        }
      }
    }

    .el-checkbox__input {
      display: none;
    }
    .attr3 {
      min-width: 120px;
    }

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}
:deep(.el-collapse-head-5) {
  height: 0px !important;
}
.attr-item {
  display: flex;
  align-items: center;
  margin-right: 50px;
  padding-bottom: 10px;
}
.reset_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 16px;
    color: #3d3d3d;
  }
}
</style>
